import echarts from 'echarts'
import {
  biAchievementAnalysisAPI,
  biAchievementAnalysisExportAPI
} from '/src/api/bi/achievement'
import {reactive, onMounted} from "vue"
import {useBaseHook} from "@/views/bi/mixins/useBaseHook.js";

export function useAchievementHook() {
  const achievementOption = reactive({
    axisOption: null,
    loading: false,
    postParams: {}, // 筛选参数
    list: [],
    fieldList: [],
    type: '',
    typeName: '',
    typeUnit: ''
  })

  const baseHook = useBaseHook()

  onMounted(() => {
    if (achievementOption.type == 'back') {
      achievementOption.typeName = '回款金额'
      achievementOption.typeUnit = '(元)'
    } else if (achievementOption.type == 'count') {
      achievementOption.typeName = '合同数量'
      achievementOption.typeUnit = '（个）'
    } else if (achievementOption.type == 'money') {
      achievementOption.typeName = '合同金额'
      achievementOption.typeUnit = '(元)'
    }
    initAxis()
  })

  function getDataList(params) {
    achievementOption.loading = true
    params.type = achievementOption.type
    achievementOption.postParams = params
    biAchievementAnalysisAPI(achievementOption.postParams).then(res => {
      achievementOption.loading = false

      const list = [{
        name: '当月' + achievementOption.typeName + achievementOption.typeUnit
      },
        // {
        //   name: '上月' + this.typeName + this.typeUnit
        // },
        // {
        //   name: '去年当月' + this.typeName + this.typeUnit
        // },
        {
          name: '环比增长（%）'
        },
        {
          name: '同比增长（%）'
        }
      ]
      const fieldList = [{
        field: 'name',
        name: '日期'
      }]

      for (let eIndex = 0; eIndex < res.data.length; eIndex++) {
        const element = res.data[eIndex]
        const fieldKey = 'value' + eIndex

        // 处理表头逻辑
        if (fieldList.length <= res.data.length) {
          fieldList.push({
            field: fieldKey,
            name: element.month.toString()
          })
        }

        const keys = [
          'thisMonth',
          // 'lastMonth',
          // 'lastYear',
          'lastMonthGrowth',
          'lastYearGrowth'
        ]
        for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
          const keyElement = keys[keyIndex]
          list[keyIndex][fieldKey] = element[keyElement]
        }
      }

      achievementOption.fieldList = fieldList
      achievementOption.list = list

      const monthData = []
      const lastMonthData = []
      const lastYeatMonthData = []
      const chainRatioData = []
      const yearOnYearData = []

      const xAxis = []
      for (let index = 0; index < res.data.length; index++) {
        const element = res.data[index]
        monthData.push(element.thisMonth)
        lastMonthData.push(element.lastMonth)
        lastYeatMonthData.push(element.lastYear)
        chainRatioData.push(element.lastMonthGrowth)
        yearOnYearData.push(element.lastYearGrowth)
        xAxis.push(element.month)
      }
      achievementOption.axisOption.xAxis[0].data = xAxis
      achievementOption.axisOption.series[0].data = monthData
      // this.axisOption.series[1].data = lastMonthData
      // this.axisOption.series[2].data = lastYeatMonthData
      achievementOption.axisOption.series[1].data = chainRatioData
      achievementOption.axisOption.series[2].data = yearOnYearData
      this.chartObj.setOption(achievementOption.axisOption, true)
    }).catch(() => {
      achievementOption.loading = false
    })
  }

  /** 柱状图 */
  function initAxis() {
    this.chartObj = echarts.init(document.getElementById('axismain'))
    achievementOption.axisOption = {
      color: [
        '#6CA2FF',
        '#6AC9D7',
        '#72DCA2',
        '#DBB375',
        '#E164F7',
        '#FF7474',
        '#FFB270',
        '#FECD51'
      ],
      toolbox: this.toolbox,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      legend: {
        data: [
          '当月' + achievementOption.typeName,
          // '上月' + this.typeName,
          // '去年当月' + this.typeName,
          '环比增长',
          '同比增长'
        ],
        bottom: '0px',
        itemWidth: 14
      },
      grid: {
        top: '50px',
        left: '30px',
        right: '30px',
        bottom: '40px',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: [],
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#333'
        },
        /** 坐标轴轴线相关设置 */
        axisLine: {
          onZero: true,
          onZeroAxisIndex: 1,
          lineStyle: {
            color: '#333'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#e6e6e6'
          }
        }
      }],
      yAxis: [{
        type: 'value',
        name: achievementOption.typeUnit,
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#333',
          formatter: '{value}'
        },
        /** 坐标轴轴线相关设置 */
        axisLine: {
          lineStyle: {
            color: '#333'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#e6e6e6'
          }
        }
      },
        {
          type: 'value',
          name: '',
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              width: 0
            }
          },
          axisLabel: {
            color: '#333',
            formatter: '{value}%'
          },
          /** 坐标轴轴线相关设置 */
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e6e6e6'
            }
          }
        }
      ],
      series: [{
        name: '当月' + achievementOption.typeName,
        type: 'bar',
        yAxisIndex: 0,
        barMaxWidth: 10,
        markPoint: {
          data: [{
            type: 'max',
            name: '最大值'
          },
            {
              type: 'min',
              name: '最小值'
            }
          ]
        },
        data: []
      },
        // {
        //   name: '上月' + this.typeName,
        //   type: 'bar',
        //   yAxisIndex: 0,
        //   barMaxWidth: 10,
        //   markPoint: {
        //     data: [{
        //       type: 'max',
        //       name: '最大值'
        //     },
        //     {
        //       type: 'min',
        //       name: '最小值'
        //     }
        //     ]
        //   },
        //   data: []
        // },
        // {
        //   name: '去年当月' + this.typeName,
        //   type: 'bar',
        //   yAxisIndex: 0,
        //   barMaxWidth: 10,
        //   markPoint: {
        //     data: [{
        //       type: 'max',
        //       name: '最大值'
        //     },
        //     {
        //       type: 'min',
        //       name: '最小值'
        //     }
        //     ]
        //   },
        //   data: []
        // },
        {
          name: '环比增长',
          type: 'line',
          yAxisIndex: 1,
          markLine: {
            data: [{
              type: 'average',
              name: '平均值'
            }]
          },
          markPoint: {
            data: [{
              type: 'max',
              name: '最大值'
            },
              {
                type: 'min',
                name: '最小值'
              }
            ]
          },
          data: []
        },
        {
          name: '同比增长',
          type: 'line',
          yAxisIndex: 1,
          markLine: {
            data: [{
              type: 'average',
              name: '平均值'
            }]
          },
          markPoint: {
            data: [{
              type: 'max',
              name: '最大值'
            },
              {
                type: 'min',
                name: '最小值'
              }
            ]
          },
          data: []
        }
      ]
    }
    this.chartObj.setOption(achievementOption.axisOption, true)
  }

  /**
   * 导出点击
   */
  function exportClick() {
    this.requestExportInfo(biAchievementAnalysisExportAPI, achievementOption.postParams)
  }


  return {
    achievementOption, baseHook, exportClick, initAxis, getDataList
  }
}
